<template>
  <a-input-search
      style="width: 100%"
      :value="value"
      v-bind="attrs"
      @change="changeHandler"
      @search="searchHandler"
  >
    <a-button slot="enterButton" v-if="typeof(attrs.enterButton) !== 'boolean'">
      {{ attrs.enterButton }}
    </a-button>
  </a-input-search>
</template>

<script>
import { COMPONENT_TYPE, CUSTOM_EVENT_TYPE } from '../constants'
import ComponentMixin from '../mixins/componentMixin'

export default {
  name: 'InputSearch',
  mixins: [ComponentMixin],
  props: {
    value: {
      type: String
    }
  },
  methods: {
    changeHandler(e) {
      const value = e.target.value
      this.$emit(CUSTOM_EVENT_TYPE.MODAL_CHANGE, value)
      this.$emit(CUSTOM_EVENT_TYPE.CHANGE, {
        type: COMPONENT_TYPE.INPUT_SEARCH,
        prop: this.formItem ? this.formItem.prop : '',
        value,
        attrs: this.attrs,
        formItem: this.formItem
      })
    },
    searchHandler(value, event) {
      this.$emit(CUSTOM_EVENT_TYPE.CUSTOM_EVENT, {
        type: COMPONENT_TYPE.INPUT_SEARCH_EVENT,
        prop: this.formItem ? this.formItem.prop : '',
        value,
        attrs: this.attrs,
        formItem: this.formItem,
        event
      })
    }
  }
}
</script>
